import { CommonComponentProps } from "@/pages/lowCodeEditorPlus/interface";
import { useMemo } from "react";

function Page({id, children, aside, showAside, styles }: CommonComponentProps) {
  // const asideDisplayStyle = useMemo(() => {
  //   return showAside ? "p-4 w-48 mr-3" : "w-0 p-0 mr-0 scale-x-0 opacity-0 -translate-x-1/2";
  // }, [showAside]);
  const asideDisplayStyle = showAside?"p-4 w-48 mr-3" : "w-0 p-0 mr-0 scale-x-0 opacity-0 -translate-x-1/2";
  return (
    <div data-component-id={id} className="flex h-full">
      <aside className={`${asideDisplayStyle} bg-white`} >
        {asideDisplayStyle ? aside : null}
      </aside>
      <main className="flex-1 w-10 bg-white p-4" >
        {children}
      </main>
    </div>
  );
}

export default Page;
